<template>
    <jzl-page-item class="page-select-item fa fa-check" :class="[{ 'active': isCurrent }]" :key="item.page_item_code"
                   @click.native.stop="handleClick"
                   :item="item" :is-h5="isH5" :is-design="true" :page-type="pageType"
                   :current-item="currentItem" :current-el-code="currentElCode"
                   v-on="$listeners" v-bind="$attrs">
        <div slot="header" v-if="item.component === 'jzlPageSub'" class="ele-design-subpage-tag"></div>
        <template slot="box" v-if="item.component === 'jzlLayout'">
            <div v-if="!item.subs || item.subs.length <= 0" class="layout-empty-tip"></div>
            <template v-for="it in item.subs">
                <page-item-proxy :item="it" :is-h5="isH5" :page-type="pageType" :items="item.subs" v-on="$listeners" v-bind="$attrs"
                                 :current-item="currentItem" :current-el-code="currentElCode"></page-item-proxy>
            </template>
        </template>
    </jzl-page-item>
</template>

<script>
    import mutil from '../../utils/mutil';

    export default {
        name: 'PageItemProxy',
        props: {
            item: Object,
            isH5: Boolean,
            pageType: [ Number, String ],
            items: Object,
            currentItem: Object,
            currentElCode: String,
            key: [ String, Number]
        },
        data () {
            return {

            }
        },
        components: {

        },
        async mounted () {

        },
        watch: {
            'item.subs'(newVal, oldVal) {
                // console.log(`--------->>> newVal: ${ newVal.length }, oldVal: ${ oldVal.length }`);
                if(newVal && oldVal && newVal.length !== oldVal.length) {
                    this.$emit("eleNodeTreeChange");
                }
            }
        },
        computed: {
            isCurrent() {
                let itemCode = _.get(this.item, 'page_item_code');
                let currentItemCode = _.get(this.currentItem, 'page_item_code');

                return itemCode && itemCode === currentItemCode;
            },
            itemTip() {
                let component = _.get(this.item, 'component');
                let w = this.item.w;
                let h = this.item.h;
                let tip = `类型: ${ component }`;

                if(!_.isEmpty(w)) tip += ` 宽: ${ w }`;
                if(!_.isEmpty(h)) tip += ` 高: ${ h }`;

                return tip;
            }
        },
        methods: {
            ...mutil,
            handleClick(e) {
                this.$emit("selectItem", {
                    item: this.item,
                    items: this.items
                });
            }
        }
    }
</script>
